<template>
	<view>
		<image src="../../static/img/jfmx.png" class="jf_bg w100"></image>
		<view class="relative" style="margin-top: -480rpx;">
			<view class="flex align-center justify-between padding-x-30">
				<image @click="goBack()" src="../../static/img/back_f.png" style="width: 32rpx;height: 32rpx;"></image>
				<view @click="showMutibleDate = true"  style="background: rgba(255,255,255,0.2);"
					class="padding-x-24 flex1 flex align-center justify-between margin-left-30 radius60">
					<input v-model="date" disabled  type="text" class="fs-24 color-fff flex1" style="height: 60rpx;"
						placeholder="可进行天/月/季度/年度查询">
					<image src="../../static/img/date.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
			<view class="margin-top-80 flex align-center justify-center">
				<view class="flex1 text-center color-fff">
					<view class="fs-36">激活计提应付</view>
					<view class="fs-56 margin-top-16">{{total}}</view>
				</view>
			</view>
			<view style="margin-top: 140rpx;" class="padding-x-24">
				<view class="fw-600 flex align-center padding-top-30">
					<view class="bg-zhuse" style="width: 6rpx;height: 30rpx;"></view><text
						class="fs-30 color-333 margin-left-16">系统激活消费计提明细</text>
				</view>
				<view v-if="list.length > 0" class="solid margin-top-30">
					<view class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 fs-24 color-333 solid-right">消费类型</view>
						<view class="w20 text-center padding-y-24 fs-24 color-333 solid-right">会员编号</view>
						<view class="w15 text-center padding-y-24 fs-24 color-333 solid-right">金额</view>
						<view class="w18 text-center padding-y-24 fs-24 color-333 solid-right">提取比例</view>
						<view class="w15 text-center padding-y-24 fs-24 color-333 solid-right">应付<br>金额</view>
					</view>
					<view v-for="(item,index) in list" :key='index' class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 solid-right">
							<view class="fs-26 color-333">{{consume[item.consume]}}</view>
							<view class="fs-24 color-999">{{item.create_time}}</view>
						</view>
						<view class="w20 text-center padding-y-24 fs-30 color-666 solid-right">{{item.member_id}}</view>
						<view class="w15 text-center padding-y-24 fs-32 color-zhuse solid-right">{{item.need_amount}}</view>
						<view class="w18 text-center padding-y-24 fs-32 color-333 solid-right">{{item.service_rate}}</view>
						<view class="w15 text-center padding-y-24 fs-32 color-zhuse solid-right">{{item.pay_amount}}</view>
					</view>
					<!-- <view class="flex align-center justify-between solid-bottom">
						<view class="flex1 text-center padding-y-24 solid-right">
							<view class="fs-26 color-333">消费</view>
							<view class="fs-24 color-999">2021-09-23 10:23-12.00</view>
						</view>
						<view class="w20 text-center padding-y-24 fs-30 color-666 solid-right">12333</view>
						<view class="w15 text-center padding-y-24 fs-32 color-zhuse solid-right">30.00</view>
						<view class="w18 text-center padding-y-24 fs-32 color-333 solid-right">30.00</view>
						<view class="w15 text-center padding-y-24 fs-32 color-zhuse solid-right">30.00</view>
					</view> -->
				</view>
				
				<empty style="position: relative;top: 120px;" v-if="list.length < 1"></empty>
				

			</view>
		</view>

		<view class="fs-22 color-999 margin-top-40 flex padding-x-30">
			<view class="color-333" style="width: 100rpx;">附注：</view>
			<view v-html="txt" style="width: 96%;"></view>
		</view>

		<date-range mode="date" :showMutibleDate="showMutibleDate" :startDate="startDate" :endDate="endDate"
			 @onSelected="dateSelected"></date-range>

	</view>
</template>

<script>
	import dateRange from 'components/zxp-datepickerRange/zxp-datepickerRange.vue'
	export default {
		components: {
			dateRange
		},
		data() {
			return {
				startDate: '2021-12-01',
				endDate: '2022-12-30',
				q: {
					start_time: "",
					end_time: "",
					page: 1
				},
				total: 0,
				hasMore: true,
				loadStatus: '',
				list: [],
				date:'',
				consume:['','首次消费','重复消费','再次消费'],
				showMutibleDate: false,
				txt:''
			}
		},
		onLoad() {
			this.txt = JSON.parse(uni.getStorageSync('conf')).note_jiti
			this.getList()
		},
		onReachBottom() {
			if (this.hasMore) {
				this.q.page += 1;
				this.getList();
			}
		},
		methods: {
			getList() {
				this.isLoading = true;
				this.$api.jiti_info(this.q).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						this.total = res.data.all;
						this.list = [...this.list, ...res.data.offline.data];
						if (res.data.offline.data.length != 0) {
							this.hasMore = true;
							this.loadStatus = '';
						} else {
							this.hasMore = false;
							this.loadStatus = 'over';
						}
					}
				})
			},
			
			dateSelected: function(e) {
				console.log(e)
				if (e) {
					this.q.start_time = e.start
					this.q.end_time = e.end
					this.date = e.start +'至' + e.end
				}
				/*这里必须将值置为false，否则无法唤起下一次的弹框显示*/
				this.showMutibleDate = false;
				this.list = [];
				this.q.page = 1;
				this.getList();
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.jf_bg {
		height: 560rpx;
	}

	.uni-input-placeholder {
		color: #fff;
	}

	.color1FC830 {
		color: #1FC830;
	}

	.color239AFF {
		color: #239AFF;
	}

	.w15 {
		width: 15%;
	}
	.w18 {
		width: 18%;
	}
	.callBtn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 60rpx;
		background: linear-gradient(to bottom, #FDA730, #FE810A);
	}
</style>
